<template>
	<scroll-view class="full box relative collect-articel-wrap" scroll-y>
		<list-vue :list="list" collect />
		<view class="empty-wrapper" v-if="isEmpty">
			<u-empty text="暂无收藏" icon="/pages-bundle/static/icon/collect-empty.png" />
		</view>
		<view class="loadmore-wrapper">
			<u-loadmore icon-color="#3c9cff" :status="status" loading-icon="semicircle" />
		</view>
	</scroll-view>
</template>

<script>
	import ListVue from '@/pages/more/com/article-list.vue'
	import { LOAD_MORE } from '@/constant/index.js'
	export default {
		props: ['auto', 'type'],
		mounted() {
			if (this.auto) {
				this.initData()
			}
		},
		components: { ListVue },
		methods: {
			async initData(clear = false) {
				if (clear) {
					this.page = 1
					this.isEmpty = false
					this.list = []
					this.status = LOAD_MORE.LOADING
				}
				if (this.status === LOAD_MORE.NO_MORE) return
				this.status = LOAD_MORE.LOADING
				const { page, type, pageSize } = this
				const resp = await this.$request({
					url: "/index/getMyCollect",
					data: { list_rows: pageSize, page, type },
				})
				console.log(resp, 'resp');
				await this.$delay(300)
				const { code, data, msg } = resp
				if (code !== 1) {
					this.status = LOAD_MORE.LOAD_MORE
					this.hasInit = false
					return this.$toast({ title: msg })
				}
				const { current_page, per_page, data: list, total } = data
				if (!!list && list.length) {
					this.list.push(...list.map(item => {
						item.__bindEvent = true
						return item
					}))
				}
				this.isEmpty = this.list.length === 0
				const hasMore = current_page * per_page < total
				if (hasMore) {
					this.page += 1
					this.status = LOAD_MORE.LOAD_MORE
					return
				}
				this.status = LOAD_MORE.NO_MORE
			},
		},
		computed: {},
		data() {
			return {
				page: 1,
				pageSize: 15,
				list: [],
				status: LOAD_MORE.LOAD_MORE,
				isEmpty: false,
				hasInit: false,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collect-articel-wrap {
		padding: 0 32rpx;
	}
</style>